<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle d-lg-none ui-theme"
     href="#" role="button" data-bs-toggle="dropdown"
     aria-expanded="false" aria-label='{{ (i18n "theme.label") }}'>
    <i class="fas fa-circle-half-stroke fa-fw"></i>
    <span>{{ (i18n "theme.theme") }}</span>
  </a>
  <a title='{{ (i18n "theme.theme") }}' class="nav-link dropdown-toggle d-none d-lg-block ui-theme"
     href="#" role="button" data-bs-toggle="dropdown"
     aria-expanded="false" aria-label='{{ (i18n "theme.label") }}'>
    <i class="fas fa-circle-half-stroke fa-fw"></i>
  </a>
  <ul class="dropdown-menu dropdown-menu-end shadow">
    <li>
      <button class="dropdown-item" type="button" data-bs-theme-value="light" aria-pressed="false">
        <i class="fas fa-sun fa-fw"></i>
        <span>{{ (i18n "theme.light") }}</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button" data-bs-theme-value="dark" aria-pressed="false">
        <i class="fas fa-moon fa-fw"></i>
        <span>{{ (i18n "theme.dark") }}</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item active" type="button" data-bs-theme-value="auto" aria-pressed="true">
        <i class="fas fa-circle-half-stroke fa-fw"></i>
        <span>{{ (i18n "theme.auto") }}</span>
      </button>
    </li>
  </ul>
</li>
